<template>
    <div>
      <!-- 搜索栏 ： 两个搜索框  搜索按钮  添加餐品按钮  批量删除   -->
      <el-row>
        <el-col :span="2"></el-col>
        <el-col :span="5">
             <el-input placeholder="请输入名称搜索" v-model="query.foodName"/>
        </el-col>
        <el-col :span="2">
                <el-button type="primary" plain @click="getByPage">搜索</el-button>
        </el-col>
        <el-col :span="3">
                <el-button type="success" plain @click="showDialog">新增餐品</el-button>
        </el-col>
        <el-col :span="3">
                <el-button type="danger" plain>批量删除</el-button>
        </el-col>
        
      </el-row>
      <!-- 表格 -->
      <el-row>
        <el-col :span="2"></el-col>
        <el-col :span="20">
            
          <el-table :data="pb.data" stripe border>
            <el-table-column prop="foodName" label="餐品名称" />
            <el-table-column prop="foodExplain" label="餐品简介" />
            <el-table-column prop="foodPrice" label="餐品价格" />
            <el-table-column prop="business.businessName" label="所属商家" />
            <el-table-column prop="remarks" label="备注" />
            <el-table-column label="操作" width="200px">
                  <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row.foodId)">
                     编辑
                    </el-button>
                    <el-button
                      size="small"
                      type="danger"
                      @click="handleDelete(scope.row.foodId)"
                    >
                      删除
                    </el-button>
                  </template>
                </el-table-column>
          </el-table>
            
        </el-col>
        
      </el-row>  
      <!-- 分页组件 -->
      <el-row>
        <el-col :span="6"></el-col>
        <el-col :span="12">
             <el-pagination
                  v-model:current-page="query.pageNow"
                  v-model:page-size="query.pageCount"
                  :page-sizes="[5, 8, 10, 20]"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="pb.totalRows"
                  @size-change="getByPage"
                  @current-change="getByPage"
                />
        </el-col>
        
      </el-row>  
      
      <!-- 编辑餐品信息的对话框  用于添加和修改 -->
      <el-dialog v-model="dialogFormVisible" title="编辑餐品信息" width="500">
          <el-form :model="form">
           
            <el-form-item label="餐品名称" :label-width="formLabelWidth">
                <el-input v-model.trim="form.foodName" autocomplete="off" />
            </el-form-item>
            <el-form-item label="餐品简介" :label-width="formLabelWidth">
                  <el-input v-model.trim="form.foodExplain" autocomplete="off" />
            </el-form-item>
            <el-form-item label="餐品价格" :label-width="formLabelWidth">
                  <el-input-number v-model="form.foodPrice" min="5"/>
            </el-form-item>
            <el-form-item label="所属商家" :label-width="formLabelWidth">
                  <el-input-number v-model="form.businessId" min="1"/>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input v-model.trim="form.remarks" autocomplete="off" />
            </el-form-item>
          </el-form>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取消</el-button>
              <el-button type="primary" @click="addOrUpdate">
                确认提交
              </el-button>
            </div>
          </template>
    </el-dialog>
      
    </div>
  </template>
  
  <script setup>
  import { onMounted, ref, getCurrentInstance } from 'vue';
  import { ElMessage,ElMessageBox } from 'element-plus';
  
    let {proxy} = getCurrentInstance();
  
    //对话框是否显示
    let dialogFormVisible = ref(false);
    let formLabelWidth = ref('100px');
    
    //表单数据 添加和修改
    let form = ref({
        foodName: '',
        foodExplain: '',
        foodPrice: 0.0,
        businessId: 1,
        remarks: '无'
    })
    
    //点新增餐品信息按钮弹出对话框
    const showDialog = ()=>{
        dialogFormVisible.value = true;
        //数据清除
        form.value = {
            foodName: '',
            foodExplain: '',
            foodPrice: 0.0,
            businessId: 1,
            remarks: '无',
        }
    }
  
    //分页+搜索条件
    let query = ref({
        pageNow: 1,
        pageCount: 5,
        foodName: ''
    })
    
    //分页对象 totalRows totalPages  data(集合)
    let pb = ref({
        totalRows: 0,
        totalPages: 0,
        data: []
    })
  
    const getByPage = ()=>{
        proxy.$axios({
            method: 'post',
            url: '/food/page',
            data: query.value
        }).then(res=>{
            console.log(res);
            let resultBean = res.data;
            if(resultBean.code==200){
              let pageBean = resultBean.data; 
              pb.value = pageBean;// totalRows  totalPages  data(集合)
            }else{
                ElMessage.error(resultBean.msg);
            }
        })
    }
    
    //添加或修改
    const addOrUpdate = ()=>{
        proxy.$axios({
            method: 'post',
            url: '/food?what=save',
            data: form.value
        }).then(res=>{
            let resultBean = res.data;
          if(resultBean.code == 200){
                getByPage();
                dialogFormVisible.value = false;
                ElMessage.success('保存餐品信息成功')
            }else{
                ElMessage.error(resultBean.msg);
            }
        })
    }
    
    //处理数据回显
    const handleEdit = (foodId)=>{
        console.log('回显：foodId',foodId);
        //根据id查询对应的实体数food
        proxy.$axios({
            method: 'get',
            url: '/food?what=getById&id='+foodId
        }).then(res=>{
            let resultBean = res.data;
            if(resultBean.code == 200){
                form.value = resultBean.data;
                dialogFormVisible.value = true;
            }else{
                ElMessage.error(resultBean.msg);
            }
        })
    }
    
    //处理删除
    const handleDelete = (foodId)=>{
        console.log('删除：foodId---',foodId);
        ElMessageBox.confirm(
            '您确定要删除该餐品信息吗？',
            '删除提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
            }
          )
            .then(() => {
                
                //确定删除
                proxy.$axios({
                    method: 'get',
                    url: '/food?what=del&id='+foodId
                }).then(res=>{
                    let resultBean = res.data;
                    if(resultBean.code == 200){
                        ElMessage.success('删除餐品信息成功');
                        getByPage();
                    }else{
                        ElMessage.error(resultBean.msg);
                    }
                })
                
            })
            .catch(() => {
                 ElMessage.info('取消删除');
            })
    }
    
    onMounted(()=>{
        getByPage();
    })
  
  
  </script>
  